<template>
  <div class="app">
    <el-tree
      :data="list"
      default-expand-all
      :props="defaultProps"
      :expand-on-click-node="false"
      class="tree"
    >
      <template #default="{ data }">
        <el-row
          type="flex"
          justify="space-between"
          class="tree-width"
          align="middle"
        >
          <el-col>{{ data.name }}</el-col>
          <el-col>
            <el-row type="flex" justify="end" class="right-tree">
              <span>{{ data.managerName }}</span>
              <el-dropdown class="menu" @command="onOperate($event, data.id)">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                  <el-dropdown-item command="del"> 删除部门 </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </el-tree>
    <small-Dialog
      ref="smallDialog"
      :dep-id="depId"
      :visible.sync="visible"
      @tree-list="treeList"
    />
  </div>
</template>

<script>
// 实现删除
// 封装API
// 点击二次询问
// 获取id， 调用接口发送请求
// 响应提示， 刷新表单
import { getDepartmentAPI, delDepartmentAPI } from '@/api/department'
import smallDialog from './components/small-dialog.vue'
export default {
  name: 'Department',
  components: { smallDialog },
  data() {
    return {
      // 部门列表
      list: [
        {
          id: 1,
          pid: 0,
          name: '传智教育',
          children: [
            { id: 2, pid: 1, name: '总裁办' },
            { id: 3, pid: 1, name: '行政部' },
            {
              id: 4,
              pid: 1,
              name: '人事部',
              children: [
                { id: 9, pid: 4, name: '财务核算部' },
                { id: 10, pid: 4, name: '税务管理部' },
                { id: 11, pid: 4, name: '薪资管理部' }
              ]
            },
            { id: 5, pid: 1, name: '财务部' },
            { id: 6, pid: 1, name: '技术部' },
            {
              id: 7,
              pid: 1,
              name: '运营部',
              children: [
                { id: 15, pid: 7, name: '上海事业部' },
                { id: 16, pid: 7, name: '北京事业部' }
              ]
            },
            { id: 8, pid: 1, name: '市场部' }
          ]
        }
      ],
      // 树形控件配置
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 弹窗
      visible: false,
      // 部门id
      depId: ''
    }
  },
  created() {
    this.treeList()
  },
  methods: {
    // 获取部门列表
    async treeList() {
      const result = await getDepartmentAPI()
      const tree = this.treeData(result.data, 1)
      this.list = tree
    },
    // 操作
    async onOperate(type, depId) {
      if (type === 'add') {
        this.visible = true
      }
      if (type === 'edit') {
        await this.$refs.smallDialog.departmentDetail(depId)
        this.visible = true
      }
      if (type === 'del') {
        this.$confirm('此操作将永久删除该文件, 是否继续?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            await this.deleteDepartment(depId)
            this.treeList()
          })
          .catch(() => {})
      }
      this.depId = depId
    },
    // 删除部门
    async deleteDepartment(depId) {
      await delDepartmentAPI(depId)
      this.$message({
        type: 'success',
        message: '删除成功'
      })
      this.treeList()
    },
    // 转换方法
    treeData(list, pid) {
      const arr = []
      list.forEach((item) => {
        if (item.pid === pid) {
          arr.push(item)
          item.children = this.treeData(list, item.id)
        }
      })
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-width {
  width: 100%;
  height: 100%;
  font-size: 14px;
}
.tree {
  border-radius: 5px;
  height: 100%;
  padding: 30px 70px;
}
.menu {
  margin-left: 10px;
}
.right-tree {
  height: 40px;
  display: flex;
  align-items: center;
}
.right-tree > span {
  display: inline-block;
}
::v-deep .el-icon-arrow-down:before {
  content: "\e764";
  font-size: 20px;
}
</style>
